﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>订购业务</title>
	<#include "/header.html"/>
		<link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/css/index.css"/>
</head>
<body>
<div id="rrapp" v-cloak class="tablediv">
	<h3 style="width: 100%;max-width: 100%;margin-bottom: 20px;text-align: center;">业务详情</h3>
	<table id="jqGrid" class="table table-hover choosetable"></table>
	<div id="jqGridPager"></div>
</div>

</div>
<!-- 模态框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4>绑定用户信息</h4>
			</div>
			<div style="padding:20px;">
				<label for="phone1">注册手机号：</label><br />
				<input id="phone1" type="text" autocomplete="off" placeholder="请输入已绑定的手机号"/>
			</div>
			<div style="padding:20px;">
				<label for="code1">验证码：</label>
				<div class="code1">
					<input id="code1" type="text" autocomplete="off" placeholder="短信验证码"/>
					<input id="btnSendCode1" type="button" class="btn btn-default" value="获取验证码" onClick="sendMessage1()" />
				</div>
			</div>
			<!--产品id-->
			<input type="text" id="cpid" style="display: none">
			<!--提醒短信内容-->
			<input type="text" id="warnMessage" style="display: none">
			<!--企业代码-->
			<input type="text" id="qCode" style="display: none">
			<!--产品代码-->
			<input type="text" id="pCode" style="display: none">
			<!--扣费类型-->
			<input type = "text" id ="kftype" style="display: none">
			<!--费率-->
			<input type="text" id="fee" style="display: none">
			<!--订购渠道-->
			<input type="text" id="oMethod" style="display: none">
			<div class="next">
				<button onclick="binding()">确定</button>
			</div>
		</div>
	</div>
</div>
<script>
    var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;//手机号正则
    var count = 60; //间隔函数，1秒执行
    var InterValObj1; //timer变量，控制时间
    var curCount1;//当前剩余秒数
	/*获取验证码*/
    function sendMessage1() {
        curCount1 = count;
        var phone = $.trim($('#phone1').val());
        if(!phoneReg.test(phone)){
            alert(" 请输入有效的手机号码");
            return false;
        }
        alert("验证码已发送，请注意查收");
        //设置button效果，开始计时
        $("#btnSendCode1").attr("disabled", "true");
        $("#btnSendCode1").val( + curCount1 + "秒再获取");
        InterValObj1 = window.setInterval(SetRemainTime1, 1000); //启动计时器，1秒执行一次
        // 获取产品id，手机号，提醒短信内容,企业代码，产品代码，操作码，扣费类型，费率，订购渠道
        var mobile=$("#phone1").val(),
            message=$("#warnMessage").val(),
            pCode=$("#pCode").val(),
            oMethod=$("#oMethod").val();
        //向后台发送处理数据
		$.ajax({
			type:"Post",
			url:"sys/busibusiness/verified",
			data:{
				userNumber:mobile,
				orderMsg:message,
				serviceType:pCode,
				orderMethod:oMethod
			},
			success:function(result){
				if(result.statusCode==1){}
				else if(result.statusCode==0){
					alert("输入成功");
				}
				else if(result.statusCode==2){
					location.reload();
				}
			},
			error:function(){
				alert("响应消息有问题")
			}
		});
    }
    function SetRemainTime1() {
        if (curCount1 == 0) {
            window.clearInterval(InterValObj1);//停止计时器
            $("#btnSendCode1").removeAttr("disabled");//启用按钮
            $("#btnSendCode1").val("重新发送");
        }
        else {
            curCount1--;
            $("#btnSendCode1").val( + curCount1 + "秒再获取");
        }
    }
	/*提交验证码*/
    function binding(){
        // 获取产品id，手机号，验证码，提醒短信内容,企业代码，产品代码，操作码，扣费类型，费率，订购渠道
        var mobile=$("#phone1").val(),
            code=$("#code1").val(),
            pCode=$("#pCode").val();
        $.ajax({
            type:"Post",
            url:"sys/busibusiness/order",
            data: {
                userNumber:mobile,
                orderCode:code,
                serviceType:pCode
            },
            success:function(result){

                if(result.msg == '9995'){
                    alert("验证码验证码失效");
                } else if (result.msg == '9996') {
                    alert("验证码不正确")
				} else if(result.success){
                    alert("您已定制成功该业务");
                }
                $('#myModal').hide();
                $('.modal-backdrop.in').css('opacity','0');
            },
            error:function(){
                alert("响应消息有问题");
            }
        });
    }

    $(function () {
        $("#jqGrid").jqGrid({
            url: '${request.contextPath}/statics/js/modules/sys/order.json',
            datatype: "json",
            colModel: [
                { label: '产品id', name: 'productId', index: 'productId', width: 40, key: true },
                { label: '套餐月费', name: 'PmonthlyFee', index: 'PmonthlyFee', width: 40 },
                { label: '国内通话', name: 'DomesticCall', index: 'DomesticCall', width: 40 },
                { label: '国内流量', name: 'DomesticFlow', index: 'DomesticFlow', width: 40 },
                { label: '短信条数', name: 'messageNumber', index: 'messageNumber', width: 40 },
                { label: '预存话费', name: 'Predeposit', index: 'Predeposit', width: 40 },
                { label: '实际花费', name: 'costSpeech', index: 'costSpeech', width: 40, key: true },
                { label: '返还话费', name: 'ReturnCharge', index: 'ReturnCharge', width: 40 },
                { label: '返还流量', name: 'ReturnFlow', index: 'ReturnFlow', width: 40 },
                { label: '返还语音', name: 'ReturnSpeech', index: 'ReturnSpeech', width: 40 },
                { label: '提醒短信内容', name: 'warnMessage', index: 'warnMessage', hidden:true },
                { label: '企业代码', name: 'qCode', index: 'qCode', hidden:true },
                { label: '产品代码', name: 'pCode', index: 'pCode'},
                {   label: '扣费类型',
                    name: 'koufeiType',
                    index: 'koufeiType',
                },
                { label: '费率', name: 'fee', index: 'fee', hidden:true },
                {   label: '订购渠道',
                    name: 'orderMethod',
                    index: 'orderMethod'
                },
                {   label: '订购',
                    name: 'Order',
                    index: 'Order',
                    width: 40,
                    formatter: function (value, grid, rows, state){
                        return '<button class="btn btn-primary" onclick="openModel(\''+ rows.pCode+'\')">订购</button>';
                    }
                }
            ],
            viewrecords: true,
            height: 385,
            rowNum: 10,
            rowList : [10,30,50],
            rownumbers: true,
            rownumWidth: 25,
            autowidth:true,
            multiselect: true,
            pager: "#jqGridPager",
            jsonReader : {
                root: "page.list",
                page: "page.currPage",
                total: "page.totalPage",
                records: "page.totalCount"
            },
            prmNames : {
                page:"page",
                rows:"limit",
                order: "order"
            },
            gridComplete:function(){
                //隐藏grid底部滚动条
                $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
            }
        });
    });
    //订购
    function openModel(pCode){
        $('#myModal').modal('show');
        $("#pCode").val(pCode);
    }

    var vm = new Vue({
        el:'#rrapp',
        data:{
            showList: true,
            title: null,
            order: {}
        },
        methods: {
            query: function () {
                vm.reload();
            },
            add: function(){
                vm.showList = false;
                vm.title = "新增";
                vm.order = {};
            },
            update: function (event) {
                var id = getSelectedRow();
                if(id == null){
                    return ;
                }
                vm.showList = false;
                vm.title = "修改";

                vm.getInfo(id)
            },
            saveOrUpdate: function (event) {
                var url = vm.order.id == null ? "sys/order/save" : "sys/order/update";
                $.ajax({
                    type: "POST",
                    url: baseURL + url,
                    contentType: "application/json",
                    data: JSON.stringify(vm.order),
                    success: function(r){
                        console.log(r);
                        if(r.code === 0){
                            alert('操作成功', function(index){
                                vm.reload();
                            });
                        }else{
                            alert(r.msg);
                        }
                    }
                });
            },
            del: function (event) {
                var ids = getSelectedRows();
                if(ids == null){
                    return ;
                }

                confirm('确定要删除选中的记录？', function(){
                    $.ajax({
                        type: "POST",
                        url: baseURL + "sys/order/delete",
                        contentType: "application/json",
                        data: JSON.stringify(ids),
                        success: function(r){
                            if(r.code == 0){
                                alert('操作成功', function(index){
                                    $("#jqGrid").trigger("reloadGrid");
                                });
                            }else{
                                alert(r.msg);
                            }
                        }
                    });
                });
            },
            getInfo: function(id){
                $.get(baseURL + "sys/order/info/"+id, function(r){
                    vm.order = r.order;
                });
            },
            reload: function (event) {
                vm.showList = true;
                var page = $("#jqGrid").jqGrid('getGridParam','page');
                $("#jqGrid").jqGrid('setGridParam',{
                    page:page
                }).trigger("reloadGrid");
            }
        }
    });


</script>
<!--<script src="${request.contextPath}/statics/js/modules/sys/order.js?_${.now?long}"></script>-->
</body>
</html>
